<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-item {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; }
        .error { background-color: #f8d7da; }
        .info { background-color: #d1ecf1; }
    </style>
</head>
<body>
    <h1>登录功能测试指南</h1>
    
    <div class="test-item info">
        <h3>测试步骤：</h3>
        <ol>
            <li>打开浏览器开发者工具（F12）</li>
            <li>切换到Console标签页</li>
            <li>访问登录页面</li>
            <li>输入用户名和密码</li>
            <li>勾选"记住密码"</li>
            <li>点击登录按钮</li>
            <li>观察控制台输出和页面跳转</li>
        </ol>
    </div>
    
    <div class="test-item success">
        <h3>预期结果：</h3>
        <ul>
            <li>登录成功后显示"登录成功！"消息</li>
            <li>页面自动跳转到首页（/dashboard）</li>
            <li>控制台显示详细的调试信息</li>
            <li>刷新页面后，用户名和密码自动填充</li>
            <li>"记住密码"复选框自动勾选</li>
        </ul>
    </div>
    
    <div class="test-item error">
        <h3>如果出现问题：</h3>
        <ul>
            <li>检查控制台是否有错误信息</li>
            <li>确认API服务器是否正常运行</li>
            <li>检查网络连接是否正常</li>
            <li>清除浏览器缓存和localStorage后重试</li>
        </ul>
    </div>
    
    <div class="test-item info">
        <h3>调试信息说明：</h3>
        <ul>
            <li><strong>登录响应:</strong> 显示服务器返回的完整响应</li>
            <li><strong>存储的token数据:</strong> 显示存储到本地的token信息</li>
            <li><strong>登录成功，准备跳转到首页:</strong> 表示登录逻辑执行成功</li>
            <li><strong>路由守卫:</strong> 显示路由跳转的详细信息</li>
            <li><strong>检查登录状态:</strong> 显示token验证过程</li>
        </ul>
    </div>
</body>
</html> 